<template>
    <el-button type="primary" @click="saveShow">添加人员</el-button>
    <br>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180" prop="name"/>
      <el-table-column label="性别" width="180" prop="sex"/>
      <el-table-column label="年龄" width="180" prop="age"/>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[2,4,6]"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
   <!--  弹出框-保存或更新 -->
   <el-dialog v-model="dialogFormVisible" :title="btnName" width="500">
    <el-form :model="form">
      <el-form-item label="人员姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-select
          v-model="form.sex"
          placeholder="Select"
          size="large"
          style="width: 240px"
        >
          <el-option key="男" label="男" value="男"/>
          <el-option key="女" label="女" value="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input-number v-model="form.age" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          {{ btnName }}
        </el-button>
      </div>
    </template>
  </el-dialog>

  </template>
  
  <script lang="ts" setup>
  import { ref,reactive } from "vue"
  import { onMounted } from "vue";
  import {page,remove,savePerson,updatePerson} from '../api/index'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  interface Person {
    id:number
    name: string
    sex: string
    age: number
  }
  //弹出框----------------------------
  const btnName = ref('添加人员')
  const dialogFormVisible = ref(false)
  const formLabelWidth = '140px'
  let form:Person = reactive({
    id:0,
    name: '',
    sex: '男',
    age: 1
  })

  const saveShow = () => {
    btnName.value = '添加人员'
    dialogFormVisible.value = true
  }

  //保存或更新
  const saveOrUpdate = () => {
      if(form.id==0){
        saveEmp()
      }
     else{
        updateEmp()
    }
    dialogFormVisible.value = false
    showPage()
   }

   //保存
   const saveEmp=async()=>{
      await savePerson(form)
      ElMessage({
        message: '数据 保存成功',
        type: 'success',
      })
      
   }
   //更新
   const updateEmp=async()=>{
      await updatePerson(form)
      ElMessage({
        message: '数据 更新成功',
        type: 'success',
      })
  }


  //---------数据源-------------------
  const tableData = ref([])
  
  const handleEdit = (row: Person) => {
    btnName.value = '编辑人员'
    form = row
    dialogFormVisible.value = true
  }
  const handleDelete = (id:number) => {
    //删除
    ElMessageBox.confirm(
      '是否删除?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        remove(id)        
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        showPage()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '删除失败',
        })
      })
  }
  
  //分页
    const currentPage = ref(1)
    const pageSize = ref(2)
    const total = ref(0)
    const background = ref(false)
    const disabled = ref(false)

    const handleSizeChange = (val: number) => {
        pageSize.value = val
        showPage()
    }
    const handleCurrentChange = (val: number) => {
        currentPage.value = val
        showPage()
    }
  
  //分页的方法
  const showPage=async()=>{
    const res = await page(currentPage.value, pageSize.value)
    tableData.value = res.data.data.list
    total.value = res.data.data.total
  }

  onMounted(() => {
    showPage()
  })
  </script>